<!--
 * @Description: 页面头部
 * @Author: wws1993
 * @Date: 2020-11-25 15:52:06
 * @LastEditTime: 2020-12-11 10:28:35
 * @LastEditors: wws1993
 * @FilePath: \TODO-MANAGER\src\components\HeaderModule.vue
-->

<template>
  <header>
    <span>{{name}}</span>
    <p>
      <el-popover
        class="menu"
        v-for="(v, k) in opts"
        :key="k"
        :content="v.label"
        trigger="hover"
        >

        <i slot="reference" :class="v.icon" @click="v.cb" />
      </el-popover>
    </p>
  </header>
</template>

<script lang="ts">
import Vue from 'vue';
import { mapState, mapActions } from 'vuex';
import { Component } from 'vue-property-decorator';

@Component({
  computed: {
    ...mapState({
      name: (state: any) => state.name,
      theme: (state: any) => state.theme,
    }),
  },
})
export default class HeaderModule extends Vue {
  private opts = [
    {label: '导入', icon: 'el-icon-upload', cb: () => {
      this.$store.commit('BatchImportModule/toggleVisible');
    }},
    {label: '日历', icon: 'el-icon-date', cb: () => {
      this.$store.commit('CalendarViewModule/toggleVisible');
    }},
    {label: '通讯录', icon: 'el-icon-collection', cb: () => {
      this.$store.commit('MailListModule/toggleVisible');
    }},
    {label: '新增待办', icon: 'el-icon-circle-plus-outline', cb: () => {
      this.$store.dispatch('openManage', 'add');
    }},
  ];
}
</script>

<style lang="scss" scoped>
.menu{cursor:pointer; color:#9cc4f2; transition:.4s; font-size:24px;
  &:hover{color:#2591fd}
  &+&{margin-left:10px;}
}
</style>